<template>
	<view class="i-goods-tab" :style="[bodyStyle]" v-if="Object.keys(option).length">
		<view :style="[headerTabStyle]">
			<e-tabs :list="option.tabList" :lineColor="option.tabBorderBottomColor" :activeStyle="activeStyle"
				:inactiveStyle="inactiveStyle" :itemStyle="tabItemStyle" :itemActiveStyle="tabItemActiveStyle"
				:lineHeight="option.tabBorderBottomShow ? '4rpx' : 0 " @change="tabChange"></e-tabs>
		</view>
		<view :style="[viewStyle]">
			<layout-goods-list :storeId="storeId" :option="item.option" v-for="(item,index) in tabList" :key="item._id"
				v-show="index === tabIndex"></layout-goods-list>

		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed } from 'vue'
	import layoutGoodsList from './child/goods-list.vue'
	import { px2rpx } from './utils'
	import { getGoodsList } from '@/common/request/api'
	import type { GoodsItem, RequestGoodsListParams } from '@/common/request/api'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import { nanoid } from '@/common/utils'

	type TabItem = {
		name : string
		goodsList : GoodsItem[],
		//购物车按钮样式类型，详见设计稿
		buttonType : 1 | 2 | 3 | 4
		//商品列表类型 1手动添加的商品 2分类商品，应通过接口请求对应分类下的商品列表 3 分区商品，应通过接口请求对应分区下的商品列表
		goodsType : 1 | 2 | 3
		// 商品分类
		goodsCategory ?: {
			name : string
			id : string
		},
		// 商品分组
		subarea ?: {
			name : string
			id : string
		},
		//显示的商品条数
		categoryGoodsNumber : number
		//商品排序 1千人千面 2自定义排序 
		categoryGoodsSort : 1 | 2
		//自定义排序类型 1综合  2销量 3价格升序 4价格降序 5访问量
		categoryGoodsSortType : number
	}

	const props = withDefaults(defineProps<{
		storeId ?: string
		option : {
			//选项列表
			tabList : TabItem[],
			//选项卡背景颜色
			tabBackgroundColor : string
			//是否显示选项条
			tabBorderBottomShow : boolean
			//选项条颜色
			tabBorderBottomColor : string
			//选项卡标题选中颜色
			tabActiveTextColor : string
			//选项卡标题未选中颜色
			tabTextColor : string
			//选项卡选中时的背景类型 0无 1显示背景色 2显示背景图片
			tabBackground : 0 | 1 | 2
			//选项卡选中时的背景色
			tabActiveBackgroundColor : string
			//选项卡选中时的背景图片
			tabActiveBackgroundImage : string
			//选项卡子项的内边距
			tabItemPaddingX : number
			//选项卡边距
			tabPaddingTop : number
			tabPaddingBottom : number
			tabPaddingX : number
			//选项卡圆角
			tabRadiusTop : number
			tabRadiusBottom : number
			// 商品布局
			layoutType : 1 | 2 | 3 | 4 | 5 | 6 | 7
			//是否显示商品标题
			titleShow : boolean
			//商品标题文本颜色
			titleColor : string
			//是否显示商品价格
			priceShow : boolean
			//商品价格文本颜色
			priceColor : string
			//是否显示划线原价
			scribeShow : boolean
			//划线原价文本颜色
			scribeColor : string
			//是否显示商品销量
			salesShow : boolean
			//商品销量文本颜色
			salesColor : string
			//是否显示购物车按钮
			buttonShow : boolean
			//购物车按钮样式类型，详见设计稿
			buttonType : 1 | 2 | 3 | 4
			//购物车按钮文本 仅buttonType为1生效
			buttonText : string
			//购物车按钮文本颜色 仅buttonType为1生效
			buttonTextColor : string
			//购物车按钮圆角 仅buttonType为1生效
			buttonRadius : number
			//购物车按钮背景颜色 仅buttonType为1生效
			buttonBackgroundColor : string
			//图标颜色 仅buttonType为2生效
			addIconColor : string
			//图标背景颜色是否为自定义 仅buttonType为2生效
			addIconBackgroundType : boolean
			//自定义图标背景颜色 仅buttonType为2与addIconBackgroundType为true时生效
			addIconBackgroundColor : string
			//图标颜色 仅buttonType为3生效
			carIconColor : string,
			//图标颜色 仅buttonType为4生效
			circularCarIconColor : string
			//图标背景颜色是否为自定义 仅buttonType为4生效
			circularCarIconBackgroundType : boolean
			//自定义图标背景颜色 仅buttonType为4与circularCarIconBackgroundType为true时生效
			circularCarIconBackgroundColor : string
			//样式风格
			styleType : 0 | 1 | 2
			//底色背景
			backgroundColor : string
			//商品背景
			goodsBackgroundColor : string
			//jump跳转商品详情 add加入购物车
			buttonEvent : 'jump' | 'add'
			// 商品边距
			goodsMargin : number
			// 边距
			paddingTop : number
			paddingBottom : number
			paddingX : number
			// 商品圆角
			goodsRadiusTop : number
			goodsRadiusBottom : number
			//活动角标 0不显示 1系统图标 2自定义
			signType : 0 | 1 | 2
			//活动角标文本
			signText : string
			// 对应活动角标，详见设计稿
			signIconName : 0 | 1 | 2
			//自定义活动角标图片地址
			signIconUrl : string
		}
	}>(), {
		option: () => ({
			tabList: [],
			tabBackgroundColor: 'rgba(255, 255, 255, 1)',
			tabBorderBottomShow: true,
			tabBorderBottomColor: 'rgba(245,34,45,1)',
			tabActiveTextColor: 'rgba(245,34,45,1)',
			tabTextColor: 'rgba(48, 49, 51, 1)',
			tabBackground: 0,
			tabActiveBackgroundColor: 'rgba(255, 255, 255, 1)',
			tabActiveBackgroundImage: '',
			tabItemPaddingX: 20,
			tabPaddingTop: 0,
			tabPaddingBottom: 0,
			tabPaddingX: 0,
			tabRadiusTop: 0,
			tabRadiusBottom: 0,
			layoutType: 1,
			titleShow: true,
			titleColor: 'rgba(48,49,51,1)',
			priceShow: true,
			priceColor: 'rgba(245,34,45,1)',
			scribeShow: true,
			scribeColor: 'rgba(192,196,204,1)',
			salesShow: true,
			salesColor: 'rgba(192,196,204,1)',
			buttonShow: true,
			buttonType: 1,
			buttonText: '',
			buttonTextColor: 'rgba(255, 255, 255, 1)',
			buttonRadius: 4,
			buttonBackgroundColor: 'rgba(245,34,45,1)',
			addIconColor: 'rgba(255, 255, 255, 1)',
			addIconBackgroundType: true,
			addIconBackgroundColor: 'rgba(245,34,45,1)',
			carIconColor: 'rgba(245,34,45,1)',
			circularCarIconColor: 'rgba(255, 255, 255, 1)',
			circularCarIconBackgroundType: true,
			circularCarIconBackgroundColor: 'rgba(245,34,45,1)',
			styleType: 0,
			backgroundColor: '',
			goodsBackgroundColor: 'rgba(255, 255, 255, 1)',
			buttonEvent: 'jump',
			goodsMargin: 7,
			paddingTop: 0,
			paddingBottom: 0,
			paddingX: 10,
			goodsRadiusTop: 0,
			goodsRadiusBottom: 0,
			signType: 0,
			signText: '',
			signIconName: 0,
			signIconUrl: '',
		})
	})

	const ctx = useCurrentInstance()
	const viewStyle = computed(() => {
		return {
			padding: `${px2rpx(props.option.paddingTop)} ${px2rpx(props.option.paddingX)} ${px2rpx(props.option.paddingBottom)} ${px2rpx(props.option.paddingX)}`,
			backgroundColor: props.option.backgroundColor
		}
	})
	const tabIndex = ref(0)

	const _option = computed(() => {
		return {
			layoutType: props.option.layoutType,
			titleShow: props.option.titleShow,
			titleColor: props.option.titleColor,
			priceShow: props.option.priceShow,
			priceColor: props.option.priceColor,
			scribeShow: props.option.scribeShow,
			scribeColor: props.option.scribeColor,
			salesShow: props.option.salesShow,
			salesColor: props.option.salesColor,
			buttonShow: props.option.buttonShow,
			buttonType: props.option.buttonType,
			buttonText: props.option.buttonText,
			buttonTextColor: props.option.buttonTextColor,
			buttonRadius: props.option.buttonRadius,
			buttonBackgroundColor: props.option.buttonBackgroundColor,
			addIconColor: props.option.addIconBackgroundType,
			addIconBackgroundType: props.option.addIconBackgroundType,
			addIconBackgroundColor: props.option.addIconBackgroundColor,
			carIconColor: props.option.carIconColor,
			circularCarIconColor: props.option.circularCarIconColor,
			circularCarIconBackgroundType: props.option.circularCarIconBackgroundType,
			circularCarIconBackgroundColor: props.option.circularCarIconBackgroundColor,
			styleType: props.option.styleType,
			backgroundColor: props.option.backgroundColor,
			goodsBackgroundColor: props.option.goodsBackgroundColor,
			buttonEvent: props.option.buttonEvent,
			goodsMargin: props.option.goodsMargin,
			paddingTop: props.option.paddingTop,
			paddingBottom: props.option.paddingBottom,
			paddingX: props.option.paddingX,
			goodsRadiusTop: props.option.goodsRadiusTop,
			goodsRadiusBottom: props.option.goodsRadiusBottom,
			signType: props.option.signType,
			signText: props.option.signText,
			signIconName: props.option.signIconName,
			signIconUrl: props.option.signIconUrl,

		}
	})

	const goodsList = ref<Array<GoodsItem[]>>([])
	props.option.tabList.map((item, index) => {
		if (item.goodsType == 2 || item.goodsType == 3) {
			let data : RequestGoodsListParams = {
				storeId: props.storeId,
				categoryId: item.goodsType == 2 ? item.goodsCategory?.id : undefined,
				pageSize: item.categoryGoodsNumber,
				pageNum: 1,
				subareaId: item.goodsType == 3 ? item.subarea?.id : undefined
			}
			let sortType = item.categoryGoodsSortType
			if (sortType > 1 && item.categoryGoodsSort == 2) {
				data['orderByColumn'] = sortType == 2 ? 'stockSold' : 'price'
				data['isAsc'] = sortType == 3 ? 'asc' : 'desc'
			}
			getGoodsList(data).then(res => {
				if (res.code == 200) {
					goodsList.value.splice(index, 1, res.rows)
				}
			})
		}
	})

	const tabList = computed(() => {
		return props.option.tabList.map((item, index) => {
			let _goodsList = item.goodsList
			if (item.goodsType == 2 || item.goodsType == 3) {
				_goodsList = goodsList.value[index]
			}
			return {
				...item,
				option: {
					..._option.value,
					goodsList: _goodsList
				},
				_id: nanoid()
			}
		})
	})

	const bodyStyle = computed(() => {
		return { backgroundColor: props.option.backgroundColor, paddingTop: px2rpx(props.option.tabPaddingTop) }
	})



	const headerTabStyle = computed(() => {
		return {
			margin: `0 ${px2rpx(props.option.tabPaddingX)} ${px2rpx(props.option.tabPaddingBottom)} ${px2rpx(props.option.tabPaddingX)}`,
			borderRadius: `${px2rpx(props.option.tabRadiusTop)} ${px2rpx(props.option.tabRadiusTop)}  ${px2rpx(props.option.tabRadiusBottom)} ${px2rpx(props.option.tabRadiusBottom)}`,
			backgroundColor: props.option.tabBackgroundColor,
			'--e-tabs-font-size': '28rpx'
		}

	})

	const activeStyle = {
		color: props.option.tabActiveTextColor
	}
	const tabItemActiveStyle = computed(() => {
		if (props.option.tabBackground === 2) {
			return { background: `url(${ctx.$fullLink(props.option.tabActiveBackgroundImage)}) no-repeat`,backgroundSize:'100% 100%' }
		}else if (props.option.tabBackground === 1) {
			return{ backgroundColor: props.option.tabActiveBackgroundColor}
		}
		return {
			
		}
	})
	const inactiveStyle = {
		color: props.option.tabTextColor
	}

	const tabItemStyle = computed(() => {
		const length = props.option.tabList.length
		const width = length === 2 ? {width:'50%'} : length === 3 ? {width:'33.33%'} :{}
		return { padding: `0  ${px2rpx(props.option.tabItemPaddingX)}`, height: '76rpx',...width }
	})


	const tabChange = (e:{index : number}) => {
		tabIndex.value = e.index
		// if(this.option.layoutType > 6){
		// 	this.currentItemId = 0
		// }
	}
</script>


<style scoped lang="scss">
	@import '@/components/list/css/layoutGoods.scss';
	@import '@/components/list/css/layoutCommon.scss';




</style>